<template>
    <div class="main">
      <div class="top">
        <div class="top-seach">
        <el-input style="height: 100%;width: 100%;" v-model="seachInput" placeholder="请输入内容或用户名" @keyup.enter="seachList">
      </el-input>
      <div class="seach" @click="seachList"></div>
      </div>
      <div class="top-right">
        <img class="fabu" src="../../assets/icon/fabu.png" @click="gofabu">
      </div>
      </div>

      <div class="list" ref="scrollContainer">
        
        <!-- <div style="height: 50px;background-color: violet;"></div> -->
        <div 
          class="boxsList" 
          v-for="item,index in list" 
          :key="index"
          @click="goVideoInfo(item.id,item.commentListId)">
          <div class="list-main">
            <img :src="item.videoUrl+hoZhui" class="list-url">
            <div class="list-title">{{ item.title }}</div>
            <div class="list-bottom">
              <img :src="item.avatar" class="list-avatar">
              <div class="list-name">{{ item.name }}</div>
              <div class="list-like">
              <img src="../../assets/icon/like.png" class="list-xin" v-if="item.isgood==false" @click="good(item.id)">
              <img src="../../assets/icon/liked.png" class="list-xin"  v-if="item.isgood==true" @click="noGood(item.id)">
              <span class="list-num">{{ item.likeMan }}</span></div>
            </div>
          </div>
        </div>

        <div class="foot">
    <el-pagination
      v-model:currentPage="currentPage"
      :total="total"
      :page-size="pageSize"
      layout="total,prev, pager, next"
      @current-change="handleCurrentChange"
    />
      </div>
      </div>
  


    </div>
  
</template>
  
<script setup>
  import { onMounted, ref } from 'vue'
  import { useRouter } from 'vue-router'
  import useCounter from '../../stores/pinia'
  import { parseJwt } from '../../stores/pinia'
  import { ElMessage } from 'element-plus';
  import {getVideoListAPI,goodAPI,noGoodAPI} from '../../api/video'
  const counterStore=useCounter()
  const currentPage=ref(1)
  const total=ref(0)
  const pageSize=ref(15)
  const seachInput=ref("")
  const userInfo=ref({})
  const router=useRouter()
  const hoZhui=ref("?x-oss-process=video/snapshot,t_0,f_jpg")

  const list=ref([
    // {videoId:1,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干fghfghfffffff呱呱呱呱呱呱呱呱呱呱呱呱呱呱呱古古怪怪大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:2,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:2,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩踩从党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:3,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干塞飞飞飞e分dfvfdvdfvdfvdfv为氛围分为威风威风威风威风为为发风格化风格化热威风威风为威风威风韩国",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:4,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概分的高分都是高富帅股份大股东党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:5,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党呱呱呱呱呱呱呱呱呱古古怪怪法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:6,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:7,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:8,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:9,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:10,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:11,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:12,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆大夫士大夫大师威风大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:13,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:14,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
    // {videoId:15,videoUrl:"https://yixue-yue-xian-da.oss-cn-beijing.aliyuncs.com/01.mp4",title:"豆腐干大概党规党法",avatar:"https://pic3.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg",name:"三三三",like:12112,createTime:2022-22-2,commentListId:23},
  ])
  
  const gofabu=()=>{
    if(counterStore.jwt==null){
      ElMessage({
    message: '您还没登录，请先前往登录',
    type: 'warning',
  })
    }else{
      router.push('/video/fabu')
    }
  }

  const goVideoInfo=(videoId,commentListId)=>{
    router.push({
        path:'/video/videoInfo',
        query:{
            videoId:videoId,
            commentListId:commentListId
        }
    })
  }

  const handleCurrentChange=()=>{
    // console.log("当前页码数为",currentPage.value)
    scrollToTop()
    getVideoList()
  }

  const seachList=async()=>{
  // const result=await 
  currentPage.value=1
  getVideoList()
  // let params={
  //   pageNo:currentPage.value,
  //   pageSize:pageSize.value,
  //   sortBy:0,
  //   searchTerms:seachInput.value
  // }
  // const result=await getPostListAPI(params)
  // console.log("搜索到的数据",result.data.data)
  // list.value=result.data.data.records
  // total.value=result.data.data.total
  // console.log(params)
  // seachInput.value=""
  }

  const good=async(videoId)=>{
    event.stopPropagation(); // 阻止事件冒泡
  let params={
    videoId:videoId,
    userId:userInfo.value.id
  }
  // console.log(params)
  if(userInfo.value.id!=undefined){
    const result=await goodAPI(params)
    // console.log("点赞反馈",result.data)
    if(result.data.code===0){
      getVideoList()
    }
  }else{
    ElMessage.warning("您还未登录")
  }
}

const noGood=async(videoId)=>{
  event.stopPropagation(); // 阻止事件冒泡
  let params={
    videoId:videoId,
    userId:userInfo.value.id
  }
  if(userInfo.value.id!=undefined){
    const result=await noGoodAPI(params)
    // console.log("取消点赞反馈",result.data)
    if(result.data.code===0){
      getVideoList()
    }
  }else{
    ElMessage.warning("您还未登录")
  }
}
  // 定义处理滚动事件的方法。
  const scrollContainer=ref(null)
const scrollToTop = () => {
  scrollContainer.value.scrollTo({top: 0});
}
  const getVideoList=async()=>{
    let params={
      pageNo:currentPage.value,
      pageSize:pageSize.value,
      sortBy:0,
      searchTerms:seachInput.value,
      userId:userInfo.value.id
    }
    // console.log(params)
    const result=await getVideoListAPI(params)
    // console.log("戏曲列表",result.data.data.list)
    list.value=result.data.data.list
    total.value=result.data.data.total
    // console.log("帖子列表111",list.value)
  }
  onMounted(()=>{
    const jwt=counterStore.jwt
    if(jwt!=null){
      userInfo.value=parseJwt(jwt).claims
    }
    getVideoList()
    scrollToTop()
  })
</script>
  
<style scoped>
  .main{
    width: 100%;
    height: 100%;
    /* height: auto !important;
    height: 200px; */
    display: flex;
    /* background-color: rgb(205, 109, 50); */
    position: relative;
    /* overflow: auto; */
    flex-direction: column;
    /* display: flex;
    flex-direction: row; */
  }
  .top{
    width: calc(100% - 250px);
    /* background-color: yellowgreen; */
    /* position: relative; */
    display: flex;
    justify-content: center;
    /* flex-direction: ; */
    position: fixed;
  }
  .top-seach{
    width: 500px;
    height: 45px;
    background-color: rgb(241, 14, 14);
    position: relative;
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* position: absolute; */
    border-radius: 20px;
    margin:20px 0 0 0;
    /* float: left; */
    /* left: 10px; */
  }
  :deep(.el-input__wrapper){
    /* background-color: rgb(250, 250, 250); */
    /* height: 100%; */
    border-radius: 20px;
  }
  :deep(.el-input__wrapper.is-focus){
    /* background-color: yellowgreen; */
    /* border-radius: 20px; */
    box-shadow: 0 0 0 1px rgb(2, 87, 121) inset;
  }
  .seach{
    width: 30px;
    height: 30px;
    /* float: left; */
    /* background-color: rgba(255, 0, 0, 0.342);  */
    position: absolute;
    border-radius: 20px;
    top:8px;
    right: 9px;
    background-image: url('../../assets/icon/seach-hover1.png');
    background-size: cover;
  }
  .seach:hover{
    background-image: url('../../assets/icon/seach.png');
  }
  .top-right{
  width: 45px;
  height: 45px;
  /* background-color: yellowgreen; */
  border-radius: 50%;
  position: absolute;
  right: 40px;
  top:20px
  }
  .top-right:hover{
  background-color: #aaaaaa5e;
  cursor: pointer;
  }
  .fabu{
  width: 100%;
  height: 100%;
  }
  .list{
    /* width:100%; */
    /* height: 100%; */
    /* display: flex; */
    /* position: absolute; */
    /* padding-top: 30px; */
    /* margin-top: 50px; */
    padding-top: 50px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: auto;
    /* margin: auto; */
    /* padding-right: calc((100% - 700px) / 2); */
    /* background-color: rgba(20, 141, 189, 0.717); */
  }
  .boxsList{
    width: 300px;
    height: 370px;
    box-shadow: var(--el-box-shadow-light);
    /* background-color: yellow; */
    margin-left: 45px;
    margin-top: 30px;
    /* overflow: hidden; */
    float: left;
    border-radius: 15px;
    cursor: pointer;
    /* background-image: url('../../../assets/icon/seach-hover.png'); */
  }
  .boxsList:hover{
    
    box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.295);
  }
  .boxsList.expanded {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    margin: 0;
    border-radius: 0;
    /* position: absolute; */
    position: fixed;
    z-index: 9999;
    background-color: rgba(43, 43, 43, 0.507);
  }
  .list-main{
    display: flex;
    flex-direction: column;
  }
  .list-url{
    width: 100%;
    height: 300px;
    cursor: pointer;
    border-radius: 14px;
  }
  .list-title{
    max-height: 42px;
    margin-top: 4px;
    padding: 0 9px;
    width: calc(100% - 18px);
    height: auto;display: -webkit-box;
    -webkit-line-clamp: 2; /* 设置显示的行数 */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    /* background-color: yellowgreen; */
  }
  .list-bottom{
    /* display: flex; */
    padding-left: 9px;
    /* flex-direction: row; */
    width: 100%;
    margin-top: 4px;
    height: auto;
    /* height: 2em; */
    font-size: smaller;
    /* background-color: rgb(27, 101, 165); */
  }
  .list-avatar{
    height: 20px;
    width: 20px;
    border-radius: 50%;
    float: left;
  }
  .list-name{
    /* height: 100%; */
    float: left;
    /* width: 40px; */
    /* background-color: aqua; */
    margin-left: 3px;
  }
  .list-like{
    width: auto;
    height: 20px;
    float: right;
    margin-right: 15px;
    /* display: flex;
    flex-direction: column; */
    /* vertical-align: middle; */
    /* justify-content: flex-end; */
    /* background-color: yellowgreen; */
  }
  .list-xin{
    width: 17px;
    height: 17px;
    float:left;
    /* background-color: yellowgreen; */
    cursor: pointer;
  }
  .list-num{
    width: auto;
    height: 20px;
    float: right;
    margin-left: 6px;
    margin-right: 9px;
  }
  .main-view{
    /* position: fixed; */
    /* position: relative; */
    position: absolute;
    /* margin: auto;s */
    top: 0;
    left: calc(50%/2);
    width: 50%;
    height:  calc(100% - 80px);
    background-color: rgba(224, 0, 0, 0.979);
    z-index: 9999;
    margin: 40px auto 40px;
    border-radius: 15px;
    overflow: hidden;
  }
  .view-left{
    width:55%;
    height:  100%;
    float: left;
    background-color: rgb(255, 255, 255);
  }
  .view-right{
    width: 45%;
    height:  100%;
    float: right;
    background-color: rgb(255, 255, 255);
  }
  .right-top{
    width: 100%;
    height: 9.5%;
    background-color: rgb(255, 255, 255);
    display: flex;
    align-items: center;
    /* justify-content: center; */
  }
  .top-avatar{
    position: relative;
    background-color: aliceblue;
    width: 12%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    /* float: left; */
    margin-left: 15px;
  }
  .top-name{
    height: auto;
    width: auto;
    /* float: left; */
    margin-left: 5px;
    /* background-color: aquamarine; */
    /* display: flex; */
    /* align-items: center;
    justify-content: center; */
  }
  .top-attend{
    width: 13%;
    height: 6%;
    /* float: right; */
    position: absolute;
    background-color: rgb(255, 47, 10);
    right: 20px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: large;
  }
  .right-center{
    width: 100%;
    height: calc(90.5% - 60px);
    background-color: rgba(91, 91, 91, 0.066);
    overflow: auto;
    /* overflow-y: hidden; */
    scrollbar-width: none;
  }
  .center-top{
    width: 100%;
    height: auto;
    /* background-color: yellow; */
    margin-top: 9px;
    margin-bottom: 17px;
    padding: 0 10px;
  }
  .center-botton{
    position: relative;
    margin-bottom: 10px;
    padding:0 5px;
  }
  .comment-header{
    display: flex;
    align-items: center;
  }
  .comment-avatar{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 50%;
    margin-right: 10px;
  }
  .comment-meta{
    flex-grow: 1;
  }
  .comment-name{
    font-size: 16px;
    font-weight: bold;
    color: yellowgreen;
  }
  .comment-time{
    color:#aaa;
  }
  .comment-body{
    margin-left: 60px;
    /* line-height: 1.6; */
  }
  .right-botton{
    width: 190%;
    height: 60px;
    /* background-color: violet; */
    bottom: 0;
    display: flex;
    flex-direction: row;
    /* position: absolute; */
    align-items: center;
    overflow: hidden;
  }
  .botton-input{
    width: 100px;
    height: 45px;
    margin-left: 10px;
    border-radius: 20px;
    padding-left: 10px;
    border: 0;
    box-shadow: 0 0 0 1px rgb(2, 87, 121) inset;
    /* background-color: #ebebeb8e; */
    /* float: left; */
  }
  .botton-input:hover{
    /* width: 50%;
    margin-right: 18px;
    transition: all 0.5s; */
  }
  .botton-input:focus{
    width: 48%;
    margin-right: 18px;
    transition: all 0.5s;
    outline: 0;
    /* box-shadow: 0 0 0 20px rgb(2, 87, 121) inset; */
  }
  .botton-like{
    /* width: 60px; */
    /* height: 50px; */
    /* float: left; */
    /* background-color: yellowgreen; */
    margin-left: 10px;
    display: flex;
    flex-direction: row;
  }
  .botton-like-img{
    height: 20px;
    aspect-ratio: 1 / 1;
  }
  .botton-like-num{
    margin-left: 8px;
  }
  .botton-house{
    width: 60px;
    height: 50px;
    /* float: left; */
    /* background-color: rgb(50, 195, 205); */
  }
  .foot{
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: auto;
    margin-top: 30px;
    margin-bottom: 30px;
    /* background-color: rgb(50, 84, 205); */
  }
  :deep(.btn-prev){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.number){
    height: 1em;
    /* color: yellowgreen; */
    background-color: #ffffff00;
  }
  :deep(.el-pager li.is-active,.el-pager li:hover){
    color: rgb(10, 27, 11);
  }
  :deep(.btn-next.is-last){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(button:disabled){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.el-pagination){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.more.btn-quickprev.el-icon){
    height: 1em;
    background-color: #ffffff00;
  }
  :deep(.more.btn-quicknext.el-icon){
    height: 1em;
    background-color: #ffffff00;
  }
</style>